<dom-module id="state-card-button">
  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
     .button-groupa {          
        text-align: right;
        margin: -6px 0;
      }    
      paper-button-group {   
        background: rgb(199,111,0,0);       
        padding: 0;
        margin: auto 0;
      	display: table;
      	border-collapse:separate;
      }  
      #b1{
      	border-spacing: var(--tiles-gap);
      	margin-right: var(--group-margin-right);
      }
      #b2{
      	border-spacing: var(--b2-gap);
      }      
      paper-button {  
      	display:table-cell;
        vertical-align:middle;
        text-align:center;
        padding: 0 5px;
        background-repeat:no-repeat;
        background-position:center;
      }
      #b1b {
        min-width: var(--tiles-width);
        height: var(--tiles-height);
        border-radius: var(--border-radius);
      }
      #b2b {
        min-width: var(--b2-width);
        height: var(--b2-height);
        border-radius: var(--b2-border-radius);
      }      
      ha-entity-toggle,ha-climate-state {
        margin: auto;
      }
      .info {
        min-width: 50px;
      }
      state-badge {
      	min-width: 40px;
      	margin:auto;
      }
      .fo {
        margin:auto;
        margin-left: 16px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:clip;
      } 
      .fot {
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
      } 
       .extra {
        font-size:14px;
        color: var(--secondary-text-color);
        margin-right: 3px;
        margin-top: -2px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:clip;
       }
        .on {  
        display:block;
        margin: 0;
        width: 100%;
        height: 100%;
        padding: 4px 0 6px 0;
        text-align: center;    
        border-bottom: 1px solid rgb(120,120,120,0.4);
       }
        .off {  
        display:none;
       }

    </style>
    <div class='horizontal justified layout'>
      <div class='horizontal info layout'>
        <state-badge state-obj="[[stateObj]]" hass="[[hass]]" class="style-scope state-info"></state-badge>
        <div class='fo'>
          <div class='fot'>
        [[stateObj.attributes.friendly_name]]
          </div>
          <template is='dom-repeat' items="[[config.extra_badge]]" as="entity_id">
          <a class='extra'>[[computeExtra(hass, entity_id, stateObj)]]</a>
          </template>
        </div>
      </div>
      <div on-click='stopPropagation' class='horizontal justified layout button-groupa'>
        <paper-button-group id="b1">
        <template is="dom-repeat" items="[[config.entities]]" as="entity">
        <paper-button id="b1b" style$="[[computeTileStyle(hass, entity)]]" on-tap="callService">
        <template is="dom-if" if="[[entity.icon]]">
        <iron-icon icon="[[entity.icon]]"></iron-icon>
        </template>
          [[entity.label]]
        </paper-button>
        </template>
        </paper-button-group>
        <ha-entity-toggle style$="[[computetoggleStyle(hass, entity_id, config)]]" state-obj="[[stateObj]]" hass="[[hass]]"></ha-entity-toggle>
        <div class='horizontal info layout' style$="[[computestateStyle(hass, entity_id, config)]]">
          <ha-climate-state state-obj="[[stateObj]]" hass="[[hass]]" class="style-scope state-card-climate">
          </ha-climate-state>
          <div style$="[[computeunitStyle(hass, entity_id, config)]]">
        &nbsp;[[stateObj.attributes.unit_of_measurement]]
          </div>
        </div>
      </div>
    </div>
    <div on-click='stopPropagation' class$="[[computeTileClass(hass, entity_id, stateObj, config)]]">
        <paper-button-group id="b2">
        <template is="dom-repeat" items="[[config.b2_entities]]" as="entity">
        <paper-button id="b2b" style$="[[computeTileStyle(hass, entity)]]" on-tap="callService">
        <template is="dom-if" if="[[entity.icon]]">
        <iron-icon icon="[[entity.icon]]"></iron-icon>
        </template>
          [[entity.label]]
        </paper-button>
        </template>
        </paper-button-group>
    </div>
  </template>
</dom-module>
<script>
  const author = 'Qinver';
  Polymer({
    is: 'state-card-button',
    properties: {
      hass: {
        type: Object,
      },
      stateObj: {
        type: Object,
      },
      config: {
        type: Object,
        computed: 'computeConfig(stateObj)',
      },
    },
    computeConfig: function (stateObj) {     
      return stateObj.attributes.config;
    },
    ready: function (hass, config) {
      var config = this.config;
      this.updateStyles({
        '--tiles-width': config.宽 ? config.宽 : '32px',
        '--tiles-height': config.高 ? config.高 : '32px',
        '--tiles-gap': config.gap ? config.gap + ' ' + '6px' : '6px',
        '--border-radius' : config.border_radius ? config.border_radius : '5px',
        '--ha-entity-toggle-gap-display': config.ha_entity_toggle_display ? config.ha_entity_toggle_display : 'inline',
        '--group-margin-right': (config.ha_entity_toggle_display == 'none') ? '-' + (config.gap ? config.gap : '5px') : '0px',

        '--b2-width': config.b2_width ? config.b2_width : '32px',
        '--b2-height': config.b2_height ? config.b2_height : '32px',
        '--b2-gap': config.b2_gap ? config.b2_gap + ' ' + '6px' : '6px',
        '--b2-border-radius' : config.b2_border_radius ? config.b2_border_radius : '5px',

      });
    },
    computeExtra: function (hass, entity_id, stateObj) {
      var title = entity_id.title ? entity_id.title : '';     
      var attribute = entity_id.attribute ? entity_id.attribute : '';
      var unit = entity_id.unit ? entity_id.unit : '';
      var zhi = entity_id.attribute ? (hass.states[entity_id.entity_id].attributes[attribute]) : (hass.states[entity_id.entity_id].state);
      var ecc = (hass.states[entity_id.entity_id].attributes.current_temperature) ? '/' +(hass.states[entity_id.entity_id].attributes.current_temperature) + '℃' : '';      
      var ec = (hass.states[entity_id.entity_id].state) + ' ' +  (hass.states[entity_id.entity_id].attributes.temperature) + '℃' + ecc;
      var id = entity_id.entity_id;
      var cpt = id.split('.')[0];
      if (cpt === 'climate') {
      var zhi = entity_id.attribute ? (hass.states[entity_id.entity_id].attributes[attribute]) : ec;
      } else{}
        return zhi ? title + zhi + unit : '';
    },
    computeTileStyle: function (hass, entity) {
      var con = entity.color_on ? entity.color_on : 'white';
      var coff = entity.color_off ? entity.color_off : 'white';
      var bcon = entity.background_color_on ? entity.background_color_on : 'blue';
      var bcoff = entity.background_color_off ? entity.background_color_off : '#04B404';
      var img = entity.image ? ' background-image: url("' + entity.image + '");' : '';
      var imgh = entity.image_height ? ' background-size: auto ' + entity.image_height + ';' : 'background-size:auto 22px;';
      var booff = 'background-color: ' + bcoff + '; color: ' + coff + ';' +  img +  imgh;
      var boon = 'background-color: ' + bcon + '; color: ' + con + ';' +  img +  imgh;
      return (hass.states[entity.entity].state === 'on') ? boon : booff;
    },
    computetoggleStyle: function (hass, entity_id, config) {
      var txs = config.ha_entity_toggle_display ? config.ha_entity_toggle_display : 'inline';
      var tid = this.stateObj.entity_id;
      var tcpt = tid.split('.')[0];
      if ((tcpt === 'climate')||(tcpt === 'binary_sensor')||(tcpt === 'device_tracker')||(tcpt === 'input_number')||(tcpt === 'sensor')||(tcpt === 'zone')||(tcpt === 'sun')){
        return 'display: none;';
      } else{
        return 'display:' + txs + ';';
      }
    },
    computestateStyle: function (hass, entity_id, config) {
      var sxs = config.ha_entity_toggle_display ? config.ha_entity_toggle_display : 'flex';
      var tid = this.stateObj.entity_id;
      var tcpt = tid.split('.')[0];
      if ((tcpt != 'climate')&&(tcpt != 'binary_sensor')&&(tcpt != 'device_tracker')&&(tcpt != 'input_number')&&(tcpt != 'sensor')&&(tcpt != 'zone')&&(tcpt != 'sun')){
        return 'display: none;';
      } else{
        return 'display:' + sxs + ';margin:auto;';
      }
    },
   computeunitStyle: function (hass, entity_id, config) {
      var tid = this.stateObj.entity_id;
      var tcpt = tid.split('.')[0];
      if (tcpt === 'sensor'){
        return 'margin:auto;';
      } else{
        return 'display: none;';
      }
    },
    callService: function (e) {
      var entity = e.model.entity.entity;
      var domain = e.model.entity.service ? e.model.entity.service.split('.')[0] : entity.split('.')[0];
      if (domain === 'script') {
        var service = entity.split('.')[1];
        var data = e.model.entity.data ? (e.model.entity.data) : {};
      } else {
        var service = e.model.entity.service ? e.model.entity.service.split('.')[1] : 'toggle';
        var data = e.model.entity.data ? (e.model.entity.data) : { 'entity_id': entity };
      }       
      this.hass.callService(domain,service,data);
    },
    stopPropagation(t){
      t.stopPropagation();
    },
    
    computeTileClass: function (hass, entity_id, stateObj, config) {
      return config.b2_entities ? ((hass.states[stateObj.entity_id].state === 'on') ? 'on' : 'off') : 'off';
      
      
    },
    
    
    
    
    
    
    
    
    
  });
</script>